Angular Cheatsheet

July 25, 2024

Here is a complete Angular cheatsheet that covers everything you need to know about Angular. You can use this cheatsheet as a quick reference guide for Angular development.

Angular CLI

Install Angular CLI

npm install -g @angular/cli

Create New Angular Project

ng new my-app

Run Angular Project

cd my-app
ng serve --open

Generate Angular Component

ng generate component my-component

Generate Angular Directive

ng generate directive my-directive

Generate Angular Pipe

ng generate pipe my-pipe

Generate Angular Service

ng generate service my-service

Generate Angular Module

ng generate module my-module

Generate Angular Class

ng generate class my-class

Generate Angular Interface

ng generate interface my-interface

Generate Angular Enum

ng generate enum my-enum

Generate Angular Guard

ng generate guard my-guard

Generate Angular Resolver

ng generate resolver my-resolver

Generate Angular Library

ng generate library my-library

Build Angular Project

ng build

Test Angular Project

ng test

Lint Angular Project

ng lint

Analyze Angular Project

ng analyze

Update Angular CLI

ng update @angular/cli

Angular Components

Create Angular Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})

export class MyComponent {
  title = 'My Component';
}

Use Angular Component

<h1>{{ title }}</h1>

Angular Component Lifecycle Hooks

ngOnChanges: Called after a bound input property changes.
ngOnInit: Called once the component is initialized.
ngDoCheck: Called during every change detection run.
ngAfterContentInit: Called after content (ng-content) has been projected into the view.
ngAfterContentChecked: Called every time the projected content has been checked.
ngAfterViewInit: Called after the component's view (and child views) has been initialized.
ngAfterViewChecked: Called every time the view (and child views) have been checked.
ngOnDestroy: Called once the component is about to be destroyed.

Angular Directives

Create Angular Directive

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appMyDirective]'
})

export class MyDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.color = 'red';
  }
}

Use Angular Directive

<p appMyDirective>My Directive</p>

Angular Pipes

Create Angular Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myPipe'
})

export class MyPipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Use Angular Pipe

<p>{{ 'my pipe' | myPipe }}</p>

Angular Services

Create Angular Service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class MyService {
  title = 'My Service';
}

Use Angular Service

import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-my-component',
  template: '<h1>{{ title }}</h1>'
})

export class MyComponent {
  title: string;

  constructor(private myService: MyService) {
    this.title = myService.title;
  }
}

Angular Routing

Configure Angular Router

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {}

Define Angular Routes

import { Routes } from '@angular/router';
import { MyComponent } from './my-component.component';

const routes: Routes = [
    {
        path: 'my-component',
        component: MyComponent
    }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {}

Use Angular Router Outlet

<router-outlet></router-outlet>

Use Angular Router Link

<a routerLink="/my-component">My Component</a>

Angular Forms

Create Angular Form

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})

export class MyComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ''
    });
  }
}

Use Angular Form

<form [formGroup]="form">
  <input formControlName="name">
</form>

Angular Http Client

Import Angular Http Client Module

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule]
})

export class AppModule {}

Create Angular Http Client Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class MyService {
  constructor(private http: HttpClient) {}
}

Use Angular Http Client Service

import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-my-component',
  template: '<h1>{{ data }}</h1>'
})

export class MyComponent {
  data: any;

  constructor(private myService: MyService) {
    myService.getData().subscribe({
      next: (res) => {
        this.data = res;
      },
      error: (err) => {
        console.error(err);
      }
    });
  }
}

Angular RxJS

Import Angular RxJS Operators

import { map, filter, switchMap } from 'rxjs/operators';

Use Angular RxJS Operators

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<h1>{{ data }}</h1>'
})

export class MyComponent {
  data: any;

  constructor(private http: HttpClient) {
    http.get('https://api.com/data')
      .pipe(
        map((res) => res.data),
        filter((data) => data.length > 0),
        switchMap((data) => http.get('https://api.com/data/' + data[0].id))
      )
      .subscribe({
        next: (res) => {
          this.data = res;
        },
        error: (err) => {
          console.error(err);
        }
      });
  }
}

Angular Testing

Create Angular Test

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { MyComponent } from './my-component.component';

describe('MyComponent', () => {
  let fixture: ComponentFixture<MyComponent>;
  let component: MyComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent]
    });

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Run Angular Tests

ng test

Angular Deployment

Visit the Angular Deployment guide for more information on deploying Angular applications.

Conclusion

This is a complete Angular cheatsheet that covers everything you need to know about Angular. You can use this cheatsheet as a quick reference guide for Angular development. Happy coding!